<template>
  <div class="map-container">
    <ShipInfoCard :shipInfo="shipInfo" ref="shipInfo" />
    <MapCard ref="map" :shipInfo="shipInfo" />
  </div>
</template>

<script>
import MapCard from "./map/index.vue";
import ShipInfoCard from "./shipInfo/index.vue";
import MQTT from "@/mixins/mqtt.js";
import { get24stat } from "@/api/cabin/navigationStatistics";
let interval24 = null;

export default {
  components: { MapCard, ShipInfoCard },
  mixins: [MQTT],
  data() {
    return {
      shipInfo: {
        lon: "---°--.---′N",
        lat: "--°--.---′E",
        hod: "---",
        rot: "---",
        cog: "---",
        sog: "---",
        stw: "---",
        speed: "---",
        direction: "---",
        depth: 0,
        xAxisAngle: 0,
        yAxisAngle: 0,
        tdt: 0,
        as: 0,
        stat: "Moored",
      },
    };
  },
  computed: {
    topicList() {
      return this.getTopic([
        "gps",
        "HDT",
        "ROT",
        "LOG",
        "WIND",
        "ECHO",
        "Tilt",
      ]);
    },
  },
  methods: {
    refreshShipInfo(row) {
      this.shipInfo = Object.assign({}, this.shipInfo, row);
      if (this.shipInfo.sog && this.shipInfo.sog > 1) {
        this.shipInfo.stat = "Under Way";
      } else {
        this.shipInfo.stat = "Moored";
      }
    },
    refreshDepth(row) {
      this.shipInfo.depth = row.depth + row.offset;
    },
    drawOtherShip(row) {
      this.$refs.map.otherShipMove(row);
    },
    drawRadarShip(row) {
      this.$refs.map.radarShipMove(row);
    },
    get24Data() {
      get24stat().then(({ data }) => {
        this.$set(this.shipInfo, "tdt", data.sailDistance);
        this.$set(this.shipInfo, "as", data.avgSpeed);
      });
    },
  },
  mounted() {
    this.mqttSubscribe(this.topicList);
    this.get24Data();
    interval24 = setInterval(() => {
      this.get24Data();
    }, 1 * 60 * 1000);
  },
  destroyed() {
    clearInterval(interval24);
  },
};
</script>

<style scoped. lang="scss">
.map-container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 265px calc(100% - 265px);
  grid-template-rows: 100%;
}
</style>
